<template>
	<view>

		<view class="">
			<!--组件-->
			<swiperNavBar ref="navbarSwiper"  :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx'
				:currentList="currentList" :curNavbar="curNavbar" v-if="swiperTabList.length > 1"  :showLoadMore="showLoadMore" :loadMoreShow="last_page > 1" @change="CurrentTab"
				@swiperChange="SwiperChange" @refresherrefresh="handleRefresherrefresh" @scrolltolower="handleScrolltolower">
				<!-- 自己需要的订单样式 S -->
				<template v-slot:slotItem="{ item, index, curNavbar, extraInfo }">
					<view class="list-item">
						{{item}} {{index}}
					</view>
				</template>
				<!-- 自己需要的订单样式 E -->
			</swiperNavBar>
			<!--组件-->
		</view>

	</view>
</template>
<script>
	import swiperNavBar from "@/components/swiperNavBar/swiperNavBar.vue";
	export default {
		components: {
			swiperNavBar
		},
		data() {
			return {
				 /* 轮播导航 S */
				swiperTabList: [{ //导航列表
					name: '导航1',
					alias: 0
				}, {
					name: '导航2',
					alias: 1
				}, {
					name: '导航3',
					alias: 2
				}, {
					name: '导航4',
					alias: 3
				}, {
					name: '导航5',
					alias: 4
				}, {
					name: '导航6',
					alias: 5
				}, {
					name: '导航7',
					alias: 6
				}],
				swiperTabIdx: 0, // 轮播 切换
				curNavbar: {}, // 选中的导航数据  alias可以用来想后端请求的type
				showLoadMore: 'more', // 加载更多动画

				currentList: [], // 当前需要展示的数据 是个数组
				 /* 轮播导航 E */
				pageNum: 1, // 分页的页码
				last_page: 1, // 总页码
			}
		},
		onLoad() {
			this.curNavbar = this.swiperTabList[this.swiperTabIdx] // 初始化选中项的数据参数
			this.getDataList()
		},
		
		watch: {
			swiperTabIdx() {
				this.getDataList()
			}
		},
		methods: {
			// 请求后台接口，获取数据
			getDataList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				setTimeout(() => {
					let arr = []
					for (let i = this.swiperTabIdx + (this.pageNum * 10); i >= 0; i--) {
						arr.push(i)
					}
					this.currentList = arr
					this.last_page = this.swiperTabIdx
					uni.hideLoading()
					if(this.$refs.navbarSwiper) {
						this.$refs.navbarSwiper.stopPullDownRefresh()
					}
					console.log('获取数据');
				}, 500)
				// console.log(this.currentList);
			},
			//navBar点击事件 
			CurrentTab: function(index, item) {
				this.swiperTabIdx = index;

			},
			//swiper滑动事件  
			SwiperChange: function(e) {
				this.swiperTabIdx = e.swiperTabIdx;
			},
			// 下拉刷新
			handleRefresherrefresh() {
				// console.log('下拉刷新');
				this.pageNum = 1
				this.getDataList()
			},
			// 滚动到底部
			handleScrolltolower() {
				console.log('触底加载');
				this.showLoadMore = "loading"
				if (this.pageNum < this.last_page) {
					this.pageNum++
					this.getDataList();
				} else {
					this.showLoadMore = "noMore!"
				}
			},
			// 点击事件
			onHandle(index){
				uni.showToast({
					title: 'index' + index,
					icon: 'none'
				})
			}
		}

	}
</script>
<style>
	page {
		background: #F8F8F8;
	}

	.list-item {
		line-height: 400rpx;
		width: 100%;
		background-color: #00B26A;
		margin-bottom: 10rpx;
		text-align: center;
	}
</style>
